export default {
  data() {
    return {
      // 关键字查询
      keywords: '',
      // 当前页码
      currentPage: 1,
      // 每页显示条数
      pageSize: 5,
      // 总条数
      total: 0,
      // 用户列表数据
      userList: [],
      // addUser对话框可见性
      userDialogVisible: false,
      // editUser对话框
      editDialogVisible: false,
      // 分配角色对话框
      setRoleDialogVisible: false,
      // 添加用户数据的对象
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 编辑用户数据的对象
      editUserForm: {
        id: -1,
        username: '',
        email: '',
        mobile: ''
      },
      // 分陪角色数据的对象
      setRoleForm: {
        newRoleId: ''
      },
      // 所有角色数列表
      roles: [],
      // 添加用户表单的验证规则
      addUserFormRules: {
        username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }, { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }],
        password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }]
      },
      // 编辑表单的验证规则
      editUserFormRules: {
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getUserData()
  },
  methods: {
    // 获取用户列表数据------------
    async getUserData() {
      const { data: res } = await this.$http.get('users', {
        params: {
          query: this.keywords, // 根据关键字查询数据，可为空
          pagenum: this.currentPage, // 当前页码
          pagesize: this.pageSize // 每页显示条数
        }
      })

      // 判断状态
      if (res.meta.status !== 200) return this.$message.error('数据获取失败')

      // 接收数据并把数据保存
      this.userList = res.data.users
      // console.log(this.userList)

      // 获取数据总条数
      this.total = res.data.total
    },
    async changeStatus(row) {
      console.log(row)
      // 发起请求，修改用户状态
      const { data: res } = await this.$http.put(`users/${row.id}/state/${row.mg_state}`)
      // 判断状态
      if (res.meta.status !== 200) return this.$message.error('数据获取失败')
      // 成功提示
      this.$message.success('状态修改成功')
    },
    // 页数发生改变时-每页显示数据条数
    handleSizeChange(newPage) {
      // console.log(newPage)
      // 参数为 用户选择的条数，重新赋值每页显示条数，并刷新页面
      this.pageSize = newPage
      this.getUserData()
    },
    // 当前页数改变时
    handleCurrentChange(newPage) {
      // console.log(newPage)
      // 重新赋值当前页数，刷新页面
      this.currentPage = newPage
      this.getUserData()
    },
    // 重置表单函数
    resetAddUserFrom() {
      this.$refs.addUserFormRef.resetFields()
    },
    // 点击按钮添加用户
    addUser() {
      // 校验表单函数
      this.$refs.addUserFormRef.validate(async valid => {
        // 判断状态
        if (!valid) return
        // 校验成功，发送请求
        const { data: res } = await this.$http.post('users', this.addUserForm)
        // 判断状态
        if (res.meta.status !== 201) return this.$message.error('添加用户失败')
        // 重置表单，刷新数据
        this.getUserData()
        // 隐藏对话框
        this.userDialogVisible = false
        // 成功添加提示框
        this.$message.success('添加用户成功')
      })
    },
    // removeUser函数
    async removeUser(scope) {
      // 确认消息弹出框
      const result = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 判断弹出框结果
      if (result !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
      // 发起请求，根据id删除数据
      const { data: res } = await this.$http.delete(`users/${scope.row.id}`)
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.getUserData()
    },
    // 点击编辑按钮,显示编辑按钮对话框
    async showEditDialog(scope) {
      // 显示对话框
      this.editDialogVisible = true
      // 根据当前数据ID请求数据
      const { data: res } = await this.$http.get(`users/${scope.row.id}`)
      // 判断状态
      if (res.meta.status !== 200) return this.$message.error('根据id获取失败')
      // 保存数据
      this.editUserForm.username = res.data.username
      this.editUserForm.email = res.data.email
      this.editUserForm.mobile = res.data.mobile
      this.editUserForm.id = res.data.id
    },
    // 编辑功能
    async eaitUser() {
      // 发送请求
      const { data: res } = await this.$http.put(`users/${this.editUserForm.id}`, {
        email: this.editUserForm.email,
        mobile: this.editUserForm.mobile
      })
      // console.log(res)
      // 判断状态
      if (res.meta.status !== 200) return this.$message.error('跟新数据失败')
      this.$message.success('数据跟新成功')
      // 刷新页面
      this.getUserData()
      // 关闭编辑按钮对话框
      this.editDialogVisible = false
    },
    // 分陪角色
    async showSetRoleDialog(scope) {
      // 显示登录框，获取当前用户ID
      this.setRoleDialogVisible = true

      // 根据id 获取用户数据
      const { data: res } = await this.$http.get(`users/${scope.row.id}`)
      // 把数据保存
      this.setRoleForm.username = res.data.username
      this.setRoleForm.role_name = scope.row.role_name
      this.setRoleForm.id = res.data.id
      // console.log(res)

      // 发送数据获取用户角色
      const { data: res2 } = await this.$http.get('roles')
      if (res2.meta.status !== 200) return this.$message.error('获取角色列表失败！')
      // console.log(res2)
      // 保存数据
      this.roles = res2.data
    },
    // 点击按钮设置用户新角色
    async setNewRole() {
      const { data: res } = await this.$http.put(`users/${this.setRoleForm.id}/role`, {
        rid: this.setRoleForm.newRoleId
      })
      // 判断状态
      if (res.meta.status !== 200) return this.$message.error('修改角色失败')
      // 成功修改
      this.$message.success('数据修改成功')
      // 刷新数据
      this.getUserData()
      // 关闭对话框
      this.setRoleDialogVisible = false
    }
  }
}
